<html>
    <head>
        <title>CSS滤镜效果</title>
        <meta charset="utf-8" />
        <style>
            *{
                border: none;
                padding: 0;
            }
        img {
            width: 100%;
            border: 2px solid cyan;
            height: auto;
            animation-fill-mode: none;
            margin: auto;
        }
        
        button{
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 100px;
            font-size: 30px;
            line-height: 30px;
            background: brown;
            color: white;
            padding: 0;
            margin: 0;
        }
        .test {
            filter: none;
        }
        
        .test1 {
            /* 模糊 */
            filter: blur(2px);
        }
        
        .test2 {
            /* 亮度 */
            filter: brightness(120%);
        }
        
        .test3 {
            /* 对比度 */
            filter: contrast(100%);
        }
        
        .test4 {
            /* 阴影 */
            filter: drop-shadow(16px 16px 20px red) invert(75%);
            /* drop-shadow(0px 0px 50px cyan); */
        }
        
        .test5 {
            /*
             色相反转：
             */
            filter: hue-rotate(30deg);
        }
        
        .test6 {
            /* 反转色：做出来的效果就像照相机底片一样 */
            filter: invert(1);
        }
        
        .test7 {
            /*
             灰度：如果不写参数，默认是100%。让你的图片只有黑色和白色
             */
            filter: grayscale(80%);
        }
        
        /*为了一些特殊的日期需要全栈变成灰色*/
        /*
         *{
         filter:grayscale(80%);
         -webkit-filter:grayscale:(80%);
         -moz-filter:grayscale(80%);
         -ms-filter:grayscale(80%);
         -o-filter:grayscale(80%);
         }
         */
        .test8 {
            /*
             棕褐色：乌贼墨水。让你的图片更显得古老
             */
            filter: sepia(80%);
        }
        
        .test9 {
            /*
             饱和度：参数范围可以随便写
             */
            /* filter: saturate(0.5); */
        }
        
        .test11 {
            /*
             饱和度：参数范围可以随便写
             */
            filter: saturate(33);
        }
        
        .test10 {
            filter: url(#change);
        }
        
        .test12{
            filter: blur(2px) opacity(0.9) brightness(0.4) hue-rotate(500deg) invert(0.9) sepia(0.7);
        }
        </style>
    </head>
    
    <body>
        <div class="row">
            <img id="rawImage" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" class="test">
                </div>
        
        
        <div class="row">
            <button id="changeButton">改头换面</button>
        </div>
        
        <svg height="0" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="change">
                    <feColorMatrix values="3 -1 -1 0 0
                    -1 3 -1 0 0
                    -1 -1 3 0 0
                    0 0 0 1 0" />
                </filter>
            </defs>
        </svg>
        <script>
            document.getElementById("changeButton").addEventListener('click', function(){
                                                                     var num = parseInt(Math.random()*12 + 1);
                                                                     document.getElementById("rawImage").className = "test" + String(num);
                                                                     });
            </script>
    </body>
    
</html>

